
import React from 'react';

import styles from './index.less';

interface ICourseProps {
  active?: boolean;
  name: string;
  [key: string]: any;
}

export default function () {
  const courses = [
    '1.黄油曲奇饼干的',
    '2.日常早餐餐包面',
    '3.网红戚风杯子蛋',
    '4.经典浮云蛋糕卷',
    '5.经典轻芝士甜品',
  ];
  return (
    <>
      <div className={styles.video}></div>
      <div className={styles.tab_bar}>
        <div className={`${styles.tab_item} ${styles.tab_active}`}>课程</div>
        <div className={styles.tab_item}>课件</div>
        <div className={styles.tab_item}>评论（127）</div>
      </div>
      <div className={styles.course_title}>烘焙培训【安德鲁森培训】</div>
      <ul className={styles.course_infos}>
        <li className={styles.price}>￥168</li>
        <li>购买人数1280</li>
        <li>观看人数1.2w</li>
        <li>职业技能: 烘焙师</li>
      </ul>
      <p className={styles.course_description}>课程介绍：采用线上点播或直播培训，线下考证的模式进行学习，用户可免费观看3节课，也可进行单集点播以及购买全部课程。</p>
      <button className={styles.buy_btn}>立即购买</button>
      <div className={styles.course_list_title}>
        <p>课程列表<span>(共12课)</span></p>
        <span>展开全部</span>
      </div>
      {courses.map(_ => <Course name={_} active={_ === '1.黄油曲奇饼干的'} />)}
      <Teacher />
      <CourseDetail />
    </>
  );
}

function Course(props: ICourseProps) {
  const { active } = props;
  return (
    <div className={styles.course_item + ' ' + (active ? styles.course_item_active : '')}>
      <div className={styles.course_item_left}>
        <div className={styles.course_item_name}>{props.name}</div>
        <span className={styles.course_item_free}>免费</span>
        <i></i>
      </div>
      <div className={styles.course_item_time}>1:15:03</div>
    </div>
  );
}

function Teacher() {
  return (
    <>
      <div className={styles.teacher_title}>老师介绍</div>
      <div className={styles.teacher_info}>
        <img src="" alt=""/>
        <div className={styles.teacher_info_main}>
          <div className={styles.teacher_name}>KK老师</div>
          <p>安德鲁森教育培训组长。5年烘焙经验，烘焙面包造型设计，担任安德鲁森...</p>
        </div>
      </div>
    </>
  );
}

function CourseDetail () {
  return (<>
    <div className={styles.course_detail_title}>课程详情</div>
    <img src="" alt="" className={styles.course_detail_img}/>
  </>);
}

function Remark () {
  return (
    <div className={styles.remark}>
      <div className={styles.remark_input}>
        <i></i>
        <input type="text"/>
      </div>
    </div>
  );
}